<template>
    <div class="set_station">
        <title-back title="岗位设置"></title-back>
        <div class="dis-flex station_list">
            <div class="station_list_item" v-for="(item, index) in station" :key="index">
                <div class="station_item_company_name">
                    <span v-if="!item.unit_name_editable" class="station_item_company_name_ipt">{{item.unit_name}}</span>
                    <input v-if="item.unit_name_editable" class="station_item_company_name_ipt" v-model="item.unit_name" type="text">
                    <a  v-if="!item.unit_name_editable" class="station_item_company_name_a" @click="item.unit_name_editable = true">编辑单位名称</a>
                    <a  v-if="item.unit_name_editable" class="station_item_company_name_a" @click="item.unit_name_editable = false">确定</a>
                    <a @click="delStationItem(index)">删除</a>
                </div>
                <div class="dis-flex station_itam_configuration" v-for="(info, index) in item.station_config" :key="index">
                    <div class="dis-flex station_itam_configuration_item">
                        岗位编号
                        <input v-model="info.post_serial" style="width:65px;margin-left: 10px;margin-right: 10px;" type="text">
                    </div>
                    <div class="dis-flex station_itam_configuration_item">
                        岗位名称
                        <input v-model="info.post_name" style="width:65px;margin-left: 10px;margin-right: 10px;" type="text">
                    </div>
                    <div class="dis-flex station_itam_configuration_item">
                        拟聘人数
                        <input v-model="info.post_number" style="width:65px;margin-left: 10px;margin-right: 10px;" type="text">
                    </div>
                </div>
                <div class="station_add">
                    <a @click="addPost(index)">添加岗位</a>
                </div>
            </div>
        </div>
        <div class="btn_wapper">
            <p style="height: 30px">
                <a @click="addUnit">新增单位</a>
            </p>
            <div class="btn">
                <button @click="save">保存</button>
                <button @click="back">返回</button>
            </div>
        </div>
    </div>
</template>

<script>
    import titleBack from "../../common/title_back.vue"
    export default {
        components: {
            titleBack
        },
        data() {
            return {
                station: [
                    {
                        unit_name: "深圳市龙华区民治街道办",
                        unit_name_editable: false,
                        station_config: [
                            {
                                post_serial: "",
                                post_name:"",
                                post_number:"",
                            }
                        ]
                    },
                    {
                        unit_name: "深圳市龙华区民治街道办",
                        unit_name_editable: false,
                        station_config: [
                            {
                                post_serial: "",
                                post_name:"",
                                post_number:"",
                            }
                        ]
                    }
                ]
            }
        },
        methods: {
            // 保存
            save() {
                console.log("保存")
            },
            back() {
                this.$router.go(-1)
            },
            // 删除单位
            delStationItem(index) {
                this.station.splice(index, 1)
            },
            // 新增单位
            addUnit() {
                let info = {
                    unit_name: "",
                    unit_name_editable: false,
                    station_config: [
                        {
                            post_serial: "",
                            post_name:"",
                            post_number:"",
                        }
                    ]
                }
                this.station.push(info)
            },
            // 新增岗位
            addPost(index) {
                let config = {
                    post_serial: "",
                    post_name:"",
                    post_number:"",
                }
                this.station[index].station_config.push(config)
                console.log(this.station[index].station_config)
            }
        }
    }
</script>

<style lang="less" scoped>
.set_station {
    // padding-left: 35px;
    padding: 15px;
    .set_station-title {
        font-size: 16px;
        line-height: 48px;
    }
    .btn_wapper {
        margin-top: 20px;
        .btn {
            button {
                width: 165px;
                margin-right: 20px;
            }
        }
}
}
.station_list {
    flex-wrap: wrap;
    justify-content: space-between;
    .station_list_item {
        width: 484px;
        // height: 120px;
        padding: 0 10px;
        border: solid 1px #ccc;
        margin-right: 60px;
        margin-bottom: 30px;
        .station_item_company_name {
            line-height: 40px;
            .station_item_company_name_ipt {
                height: 25px;
                box-sizing: border-box;
                width: 300px;
                display: inline-block;
            }
            .station_item_company_name_a {
                text-align: center;
                width: 100px;
                display: inline-block;
                margin:0 10px 0 20px;
            }
        }
        .station_itam_configuration {
            line-height: 24px;
            margin-bottom: 10px;
        }
        .station_add {
            line-height: 36px;
        }
    }
}
</style>